<template>
  <div class="author-detail">
    <el-card>
      <div slot="header" class="clearfix">
        <span>摄影师详情</span>
      </div>
      
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="10" animated />
      </div>
      
      <div v-else-if="author" class="author-info">
        <div class="author-header">
          <div class="author-avatar">
            <el-avatar :size="100" :src="author.avatar || defaultAvatar"></el-avatar>
          </div>
          <div class="author-meta">
            <h2>{{ author.username }}</h2>
            <p class="author-bio">{{ author.bio || '这个用户很懒，还没有填写个人简介' }}</p>
            <div class="author-stats">
              <div class="stat-item">
                <span class="stat-value">{{ author.photoCount || 0 }}</span>
                <span class="stat-label">作品</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ author.followerCount || 0 }}</span>
                <span class="stat-label">粉丝</span>
              </div>
              <div class="stat-item">
                <span class="stat-value">{{ author.likeCount || 0 }}</span>
                <span class="stat-label">获赞</span>
              </div>
            </div>
          </div>
        </div>
        
        <el-divider content-position="center">摄影作品</el-divider>
        
        <div v-if="photos.length > 0" class="photo-grid">
          <div v-for="photo in photos" :key="photo.id" class="photo-item">
            <el-card :body-style="{ padding: '0px' }" shadow="hover">
              <div class="photo-img" @click="viewPhotoDetail(photo.id)">
                <img :src="photo.imageUrl" :alt="photo.title">
              </div>
              <div class="photo-info">
                <span class="photo-title">{{ photo.title }}</span>
                <div class="photo-stats">
                  <span><i class="el-icon-view"></i> {{ photo.viewCount }}</span>
                  <span><i class="el-icon-star-on"></i> {{ photo.likeCount }}</span>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        
        <div v-else class="empty-photos">
          <el-empty description="暂无作品"></el-empty>
        </div>
        
        <el-pagination
          v-if="photos.length > 0"
          @current-change="handlePageChange"
          :current-page.sync="page"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
          background>
        </el-pagination>
      </div>
      
      <div v-else class="not-found">
        <el-empty description="找不到该摄影师信息"></el-empty>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AuthorDetail',
  data() {
    return {
      loading: true,
      author: null,
      photos: [],
      page: 1,
      pageSize: 12,
      total: 0,
      defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  },
  created() {
    this.fetchAuthorData()
  },
  methods: {
    async fetchAuthorData() {
      this.loading = true
      try {
        const authorId = this.$route.params.id
        // Fetch author info
        const authorRes = await this.$http.get(`/users/${authorId}`)
        if (authorRes.data.code === 1) {
          this.author = authorRes.data.data
          this.fetchAuthorPhotos()
        } else {
          this.$message.error(authorRes.data.msg || '获取摄影师信息失败')
          this.loading = false
        }
      } catch (error) {
        console.error('获取摄影师信息失败', error)
        this.$message.error('获取摄影师信息失败')
        this.loading = false
      }
    },
    async fetchAuthorPhotos() {
      try {
        const authorId = this.$route.params.id
        const res = await this.$http.get(`/photos/user/${authorId}`, {
          params: {
            page: this.page,
            pageSize: this.pageSize
          }
        })
        
        if (res.data.code === 1) {
          this.photos = res.data.data.records || []
          this.total = res.data.data.total || 0
        } else {
          this.$message.error(res.data.msg || '获取作品列表失败')
        }
      } catch (error) {
        console.error('获取作品列表失败', error)
        this.$message.error('获取作品列表失败')
      } finally {
        this.loading = false
      }
    },
    handlePageChange(page) {
      this.page = page
      this.fetchAuthorPhotos()
    },
    viewPhotoDetail(photoId) {
      this.$router.push(`/photos/${photoId}`)
    }
  }
}
</script>

<style scoped>
.author-detail {
  padding: 20px;
}

.loading-container {
  padding: 20px 0;
}

.author-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.author-avatar {
  margin-right: 30px;
}

.author-meta {
  flex: 1;
}

.author-meta h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 24px;
  color: #303133;
}

.author-bio {
  color: #606266;
  margin-bottom: 15px;
  font-size: 14px;
  line-height: 1.5;
}

.author-stats {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.stat-label {
  font-size: 12px;
  color: #909399;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.photo-img {
  height: 180px;
  overflow: hidden;
  cursor: pointer;
}

.photo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.photo-img:hover img {
  transform: scale(1.05);
}

.photo-info {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.photo-title {
  font-size: 14px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

.photo-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #909399;
}

.empty-photos {
  padding: 40px 0;
}

.not-found {
  padding: 50px 0;
}

.el-pagination {
  text-align: center;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .author-header {
    flex-direction: column;
    text-align: center;
  }
  
  .author-avatar {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}
</style> 